import React from 'react';
import { connect } from 'dva';
import { createForm } from 'rc-form';
import styles from './title.css'

import arrowIcon from '../../../../../../icons/personal/arrow.png';
import writeIcon from '../../../../../../icons/personal/write-icon.png';
const searchImg = require('../../../../../../icons/search.png')

class Title extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      searchValue: ''
    }
  }

  getValue = (value) => {
    this.props.form.validateFields((error, value) => {
      const sValue = value.content.trim();
      this.props.onSearch(sValue)
    });
  };
  render(){
    const { goBack, onSearch=()=>{} } = this.props;
    const {getFieldDecorator, validateFields, getFieldsValue, resetFields, getFieldProps} = this.props.form;
    return(
      <div className={`${styles.title}`}>
        <img src={arrowIcon} className={styles.titleIcon} onClick={() => goBack()}/>
        <div className={styles.titleText}>
          <img className={styles.searchImg} src={searchImg} />
          <input
            {...getFieldProps('content',{
              initialValue:'',
              rules: [
                { required: false, message: '请填写搜索内容' }
              ]
            })}
            type="text"
            placeholder="请输入兼职名称"
            className={styles.searchInput}
          />
        </div>
           <div className={styles.complete} onClick={() => this.getValue()}>搜索</div>
      </div>
    )
  }
}

const TitleWrapper = createForm()(Title);
export default connect()(TitleWrapper);
